<template>
  <div class="category">
    <header class="category">
      <div @click="returnPage" class="header-left">
        <i class="iconfont icon-return"></i>
      </div>
      <div class="header-right">
        <i class="iconfont icon-manage"></i>
      </div>
      <div class="header-center">
        <input type="text" placeholder="请输入商品名称">
        <i class="iconfont icon-search"></i>
      </div>
    </header>
    <div class="main">
      <div class="categoryleve clearfix">
        <p>分类：</p>
        <span v-for="(item,index) in classifyList" :key="index">{{item.title}}</span>
      </div>
      <div class="filter" style="position:static; top:0px; width:100%;">
        <ul class="filter-inner">
          <li class="filter-cur">
            <p>销量
              <span>
                <i class="iconfont icon-packup "></i>
                <i class="iconfont icon-unfold current"></i>
              </span>
            </p>
          </li>
          <li class="">
            <p>综合</p>
          </li>
          <li class="">
            <p>人气
              <span class="rq">
                <i class="iconfont icon-unfold"></i>
              </span>
            </p>
          </li>
          <li class="">
            <p>价格
              <span>
                <i class="iconfont icon-packup "></i>
                <i class="iconfont icon-unfold "></i>
              </span>
            </p>
          </li>
          <li class="filter-navBtn">
            <p>筛选</p>
          </li>
        </ul>
        <input type="hidden" name="category" value="2">
        <input type="hidden" name="display" value="grid" id="display">
        <input type="hidden" name="brand" value="0">
        <input type="hidden" name="price_min" value="0">
        <input type="hidden" name="price_max" value="0">
        <input type="hidden" name="filter_attr" value="0">
        <input type="hidden" name="page" value="1">
        <input type="hidden" name="sort" value="sales_volume_base">
        <input type="hidden" name="order" value="DESC">
      </div>
      <form name="compareForm" action="compare.php" method="post" onsubmit="return compareGoods(this);">
        <div class="srp list flex-f-row" id="J_ItemList" style="opacity:1;">
          <div v-for="(item,index) in goodsList" :key="index" class="product flex_in single_item" id="more_element_1">
            <div class="pro-inner">
              <div class="proImg-wrap">
                <router-link :to="`/detail/${item.id}`">
                  <img src="../../assets/img/p1.jpg" alt="宣传彩页-双折页">
                </router-link>
              </div>
              <div class="proInfo-wrap">
                <div class="proTitle">
                  <router-link :to="`/detail/${item.id}`"> {{item.title}} </router-link>
                </div>
                <div class="proSKU"></div>
                <div class="proPrice">
                  <em>￥
                    <span>{{item.price}}</span>
                  </em>
                </div>
                <div class="proService">
                  <del>￥
                    <span>{{item.oldprice}}</span>
                  </del>
                </div>
                <div class="proSales">月销:
                  <em>{{item.sale}}</em>
                </div>
                <div class="proIcons">
                  <img width="55" height="16" src="../../assets/img/youhcx.png" alt="宣传彩页-双折页">
                  <div class="mr2" style="float:right;">
                    <a @click="" class="btn_num decrease" title="减少数量">-</a>
                    <input type="text" class="input" value="0" size="3">
                    <a class="btn_num increase" title="增加数量">+</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="more_loader_spinner" style="display: block;">
            <div style="line-height:48px;text-align:center;font-size:14px;">亲，已经最后一页了哦！</div>
          </div>
        </div>
      </form>
      <!-- 底部内容 -->
      <div class="content-footer">
        <div id="content" class="footer">
          <div class="in">
            <div class="search_box">
              <form method="post" action="search.php" name="searchForm" id="searchForm_id">
                <input name="keywords" type="text" id="keywordfoot">
                <i class="iconfont icon-search"></i>
              </form>
            </div>
            <a href="./" class="homeBtn">
              <span class="iconfont icon-homepage_fill"> </span>
            </a>
            <a href="#top" class="gotop">
              <span class="iconfont icon-packup"> </span>
              <p> TOP </p>
            </a>
          </div>
          <p class="link region">
            <a href="./"> 返回首页 </a>
            <a href="flow.php"> 购物车 </a>
            <a href="user.php"> 会员中心 </a>
            <a href="ectouch.php?act=contact"> 联系我们 </a>
          </p>
          <p class="region">© 2005-2019 任印网－联合创想企业旗下品牌 版权所有，并保留所有权利。 </p>
          <div class="favLink region">
            <a href="http://www.xpkj.net"> powered by 众合网络 </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from 'vuex'
// import { createNamespacedHelpers } from 'vuex'
// const { mapState, mapMutations, mapActions } = createNamespacedHelpers('home')
export default {
  data() {
    return {
      classifyId: '',
      goodsList: [],
      classifyList: []
    }
  },
  mounted() {
    this.classifyId = this.$route.params.id
    this.getShopsData({ id: this.classifyId }).then(data => {
      this.goodsList = data
    })
    this.getTypes().then(data => {
      let arr = data.filter((key, value) => {
        return key.id == this.classifyId
      })
      this.classifyList = arr[0].children
    })
  },
  methods: {
    ...mapActions('home', ['getShopsData']),
    ...mapActions('sliderNav', ['getTypes']),
    returnPage() {
      this.$router.back(-1)
    }
  }
}
</script>

<style scoped>
/* 底部内容 */
.footer {
  padding: 0 9.6px 9.6px;
  color: #aaa;
  font-size: 9.6px;
  margin-top: 20px;
}
.footer .in {
  position: relative;
  height: 44.8px;
  margin: 0 -9.6px;
  padding: 0 56px;
  background-color: #b9b9b9;
}
.search_box {
  position: relative;
  top: 6.4px;
  width: 100%;
  background: #fff;
  border-radius: 20px;
  text-align: center;
}
form {
  display: block;
  margin: 0;
}
.search_box input {
  width: 85%;
  height: 32px;
  line-height: normal;
  border: none;
  font-size: 13px;
  outline: none;
}
.search_box i {
  font-size: 18px;
  position: absolute;
  top: 6.4px;
  right: 9.6px;
  width: 20px;
  height: 20px;
  border: none;
}
.footer .gotop,
.footer .homeBtn {
  background: #a1a1a1;
}
.homeBtn {
  left: 0;
}
.homeBtn,
.footer .gotop {
  position: absolute;
  top: 0;
  width: 44px;
  height: 44px;
  color: #fff;
  font-size: 11px;
}
.homeBtn span {
  font-size: 32px;
  position: absolute;
  left: 4.8px;
  top: 4.8px;
}
.footer .gotop {
  right: 0;
}
.footer .gotop,
.footer .homeBtn {
  background: #a1a1a1;
}
.footer .gotop span {
  font-size: 24px;
  position: absolute;
  left: 27%;
  top: 1.8px;
  width: 20px;
  height: 20px;
}
.footer .gotop p {
  position: absolute;
  bottom: 2.24px;
  left: 7.2px;
  width: 35px;
}
.footer .link {
  line-height: 16px;
  font-size: 11px;
  color: #1ca2e1;
}
.footer .link a {
  display: inline-block;
  margin-top: 4.8px;
  padding: 0 9.6px 0 4.8px;
  border-right: 1px solid #d5d5d5;
  color: #1ca2e1;
}
.footer .link a:last-child {
  border: none;
}
.footer .favLink,
.footer p {
  text-align: center;
  line-height: 20px;
}
.footer .favLink a {
  margin-right: 4.8px;
  color: #aaa;
}
/*************************/
.mr2 {
  margin-right: 2px;
}
.srp.list {
  width: 100%;
}
.srp {
  display: table;
  width: 100%;
  padding-bottom: 10px;
  padding-top: 5px;
  background-color: #eee;
}
.flex-f-row {
  flex-flow: row;
}
.srp.list .product {
  width: 100%;
  padding: 5px;
}
.srp .product {
  display: inline-block;
  float: none;
  align-items: stretch;
  box-sizing: border-box;
  padding: 6px;
  padding-bottom: 0;
}
.flex_in {
  box-flex: 1;
}
.srp.list .pro-inner {
  width: 100%;
  background-color: #fff;
  padding: 2px 1px;
}
.srp .pro-inner {
  position: relative;
  background-color: #fff;
  border-radius: 5px;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.srp.list .proImg-wrap {
  width: 26.4%;
  margin-right: 6px;
  transition: all 0.6s linear;
}
.srp .proImg-wrap {
  float: left;
}
.srp.list .proInfo-wrap {
  float: none;
  padding: 0;
  padding-left: 90px;
}
.srp .proInfo-wrap {
  float: left;
  padding: 5px;
  width: 100%;
  box-sizing: border-box;
}
.srp.list .proImg-wrap img {
  width: 100%;
}
.srp .proImg-wrap img {
  border-radius: 5px;
}
.srp.list .proTitle {
  line-height: 17px;
  height: 36px;
  margin-bottom: 8px;
}
.srp .proTitle {
  overflow: hidden;
}
.srp.list .proPrice {
  float: left;
  margin-right: 10px;
}
.srp .proPrice {
  font-family: arial;
  height: 20px;
  line-height: 21px;
}
.srp .proService {
  color: #333;
  font-size: 13px;
  height: 20px;
  line-height: 21px;
}
.srp .proSales {
  line-height: 16px;
  margin-top: 3px;
}
.srp .proSales {
  float: left;
  color: #999;
  font-size: 12px;
  font-family: arial;
}
.srp .proIcons {
  padding-left: 50px;
  height: 25px;
}
.srp.list .proTitle a {
  font-size: 13px;
}
.srp .proTitle a {
  color: #333;
  font-size: 13px;
  text-decoration: none;
  transition: all 0.3s linear;
}
.srp .proPrice em {
  color: #ff3838;
  font-size: 16px;
  font-weight: 700;
  margin-left: 2px;
}
.srp em {
  font-style: normal;
}
.srp del {
  color: #999;
  font-size: 12px;
}
.srp .proSales em {
  color: #333;
}
.srp .proIcons img {
  vertical-align: middle;
}
.srp:after {
  display: block;
  clear: both;
  height: 0;
  content: ' ';
}
/* .srp .proIcons>* {
    margin: 0 3px 0 0;
} */
.btn_num {
  font-size: 20px;
  display: inline-block;
  border: 1px solid #b3b3b3;
  width: 23px;
  height: 23px;
  line-height: 23px;
  text-align: center;
  float: left;
  background: #f3f3f3;
  color: #333;
}
.proInfo-wrap input {
  text-align: center;
  border: 1px solid #b3b3b3;
  height: 23px;
  float: left;
  margin: 0px 1px;
  outline: none;
}
/************************/
.filter {
  width: 100%;
  text-align: center;
  height: 38.4px;
  background: #fff;
}
.filter ul {
  display: table;
  width: 100%;
  margin: 0;
  padding: 0;
  border-collapse: collapse;
}
/* 激活样式 */
.filter ul li.filter-cur {
  border-bottom: 1px solid #ff3838;
}
.filter ul li {
  display: table-cell;
  padding: 8px 0;
}
.filter ul li.filter-cur p {
  color: #ff3838;
}
.filter p {
  display: inline-block;
  width: 100%;
  font-size: 14px;
  color: #666;
  text-decoration: none;
}
.filter p span {
  position: relative;
}
.filter .icon-packup {
  top: -1px;
}
.filter .icon-unfold {
  bottom: -1px;
}
.filter .rq .icon-unfold {
  bottom: 2px;
}
.filter i {
  font-size: 18px;
  color: #333;
  position: absolute;
  display: inline-block;
  /* top: 6.4px; */
  width: auto;
  height: 11px;
  line-height: 11px;
  margin-left: 2px;
}
.filter i.current {
  color: #ff3838;
}
.filter .filter-navBtn {
  padding: 0;
}
.filter .filter-navBtn p {
  border: 1px solid #e2e2e2;
  border-radius: 3px;
  width: 80%;
  padding: 2px 0;
  color: #333;
}
/***************************/
.categoryleve {
  position: static;
  top: 0px;
  background: #fff;
  border-bottom: 1px solid #ebeced;
  padding: 13px 8px;
}
.categoryleve p {
  display: block;
  height: 29px;
  line-height: 29px;
  padding: 0;
  float: left;
  font-weight: bold;
  color: #ff3838;
  font-size: 14px;
}
.categoryleve span {
  display: block;
  height: 29px;
  line-height: 29px;
  padding: 0 16px;
  float: left;
  font-size: 14px;
}
/***********************/
.category {
  width: 100%;
  height: 100%;
}
.clearfix:after {
  content: '';
  display: block;
  clear: both;
}
/* 头部 */
header.category {
  position: relative;
  z-index: 999;
  background-color: #ff3838;
  height: 48px;
  text-align: center;
}
.category .header-left,
.category .header-right {
  position: absolute;
  width: 50px;
  height: 100%;
  line-height: 48px;
  z-index: 122;
}
.category .header-left {
  left: 0;
}
.category .header-right {
  right: 0;
}
.header-left .icon-return,
.header-right .icon-manage {
  font-weight: bold;
  color: #fff;
  font-size: 26px;
}
.header-center {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 8px 50px;
  position: relative;
}
.header-center input {
  text-indent: 15px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: none;
  border-radius: 50px;
}
.header-center .icon-search {
  font-size: 26px;
  color: #dfdfdf;
  font-weight: bold;
  position: absolute;
  right: 60px;
  top: 8px;
}
</style>
